<template>
    <div class="recommend" :style="{paddingBottom:showBar?'40px':''}">
		<!-- 推荐歌单 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1592243_edabzejozd.css">
        <!-- 轮播图 -->
        <div class="viewpager">
            <van-swipe class="banner" :autoplay="3000" indicator-color="brank">
                <van-swipe-item v-for="(item,index) in bannerList" 
                    :key="index" @click="bannerPlay(index)">
                    <img :src="item.imageUrl" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 功能按钮 -->
        <ul class="navList">
            <li>
                <div class="iconColor">
                    <i class="iconfont icon-meirituijian-"></i>
                </div>
                <p>每日推荐</p>
            </li>
            <li>
                <div class="iconColor">
                    <i class="iconfont icon-gedan"></i>
                </div>
                <p>歌单</p>
            </li>
            <li>
                <div class="iconColor">
                    <i class="iconfont icon-paihangbang"></i>
                </div>
                <p>排行榜</p>
            </li>
            <li>
                <div class="iconColor">
                    <i class="iconfont icon-diantai"></i>
                </div>
                <p>电台</p>
            </li>
            <li>
                <div class="iconColor">
                    <i class="iconfont icon-zhibo"></i>
                </div>
                <p>直播</p>
            </li>
        </ul>
        <!-- 分割线 -->
        <div class="cut-off-Rule"></div>
        <!-- 推荐歌单 -->
        <div class="recomList">
            <div class="gList-title">
                <span>推荐歌单</span>
                <span>
                    <router-link :to="{name:'songplaza'}">歌单广场</router-link>
                </span>
            </div>
            <div class="songList" >
                    <div class="songItem" @click="tzSongList(item.id)" v-for="(item,index) in personalizedList" :key="index">
						<img :src="item.picUrl" alt="">   
						<p> {{item.name}} </p>
						<i class="ejting iconfont icon-erji"> {{forMatMoney(item.playCount)}}</i>
                    </div>
            </div>
        </div>
        <!-- 新碟/新歌 -->
        <div class="new-title">
                <div class="title-left">
                    <span @click="newBtn('album')" :class="{newactive:isTrue}">新碟</span> | 
                    <span @click="newBtn('newsongs')" :class="{newactive:!isTrue}">新歌</span>   
                </div>
                <div class="moreDc">
                    <router-link :to="{name:'moresong'}">更多新碟</router-link>
                </div>
        </div>
        <div class="newSong">
            <div class="newdc" v-show="isTrue" >
                <div class="songItem" v-for="(item,index) in albumsList.slice(0,3)" :key="index">
                    <img :src="item.picUrl" alt="">   
                    <p> {{item.name}} </p>
                    <div class="songGs">
                        <p v-for="(it,idx) in item.artists" :key="idx">{{ it.name }}</p>
                    </div>
                </div>
            </div>
            <div class="newge" v-show="!isTrue">
                <div class="ngeItem" v-for="(item,index) in newsongsList.slice(0,3)" :key="index">
                    <img :src="item.picUrl" alt="">   
                    <p> {{item.name}} </p>
                    <div class="newges">
                        <p v-for="(it,idx) in item.song.artists" :key="idx">{{ it.name }}</p>
                    </div>
                </div>
            </div>
        </div>
		<p>最新音乐</p>
		<song class="song-item" v-for="(item,index) in newsongsList" :key="index"
			:songData="{
                songIdx:index,
                songName:item.name,
                alias:item.song.alias[0],
                ar:item.song.artists[0].name,
                al:item.song.album.name,
                id:item.id,
                itemMp3:item,
                }"
			:playList="ListIdData"
			:songIndex="index"
		>
		</song>
		
    </div>
</template>

<script>
	
import api from '../js/api.js';
import song from "../components/song.vue"
    export default {
        data() {
            return {
				// 新歌新碟,激活按钮
                isTrue:true,
				// 轮播图
                bannerList:[],
				// 推荐歌单
                personalizedList:[],
				// 新专辑
                albumsList:[],
				// 新歌
                newsongsList:[],
                // 轮播音乐播放数据
                bannerMp3:{},
				// 歌单播放量
				// playCount:"",
				ListIdData:null,//播放专辑列表所有歌曲的Id
            }
        },
		components:{
			song
		},
        created() {
			// 获取轮播图
            this.axios({
				// 使用对应接口
                url:api.banner
            }).then(res=>{
                // window.console.log(res)
                this.bannerList = res.data.banners
            });
			// 获取推荐歌单
            this.axios({
				// 使用对应接口
                url:api.personalized
            }).then(res=>{
                // window.console.log(res);
                this.personalizedList = res.data.result;
				// this.playCount = this.personalizedList.playCount 
            });
            this.axios({
                url:api.album
            }).then(res=>{
                window.console.log(res);
                this.albumsList = res.data.albums
            });
            
            this.axios({
                url:api.newsongs
            }).then(res=>{
                window.console.log(res);
                this.newsongsList = res.data.result;
                this.ListIdData = this.newsongsList.map(e=>e.id);
                window.console.log(this.newsongsList.map(e=>e.id))
            })
        },
		// 监听播放状态弹出播放栏
		computed: {
            showBar(){
                return this.$store.state.musicData.al.id;
            },
        },
        methods: {
            newBtn(type){
                if(type=='album'){
                    this.isTrue = true;
                    this.newList = this.albumsList;
                    }else{
                    this.isTrue = false;
                    this.newList = this.newsongsList;
                }
                this.axios({
                    url:api[type]
                }).then(res=>{
                    this.albumsList = res.data.albums
                    // window.console.log(res);
                })
            },
            tzSongList(id){
                // window.console.log('歌单id',id)
                // this.$router.push("/list")
                this.$router.push({
                    path: '/list',
                    query: {
                        id: id
                    }
                })  
            },
			// 处理播放量
            forMatMoney(num){
                // console.log("函数调用所得");
                return (num/10000).toFixed(1) + "万";
            },
        },
    }
</script>

<style lang="scss" scoped>
    .recommend{
        .viewpager{
            margin-top: 48px;
            .banner{
                width: 100%;
                font-size: 0;
                margin: 10px 0;
                overflow: hidden;
                img{
                    width: 95%;
                    border-radius: 8px;
                }
            }
        }
        .navList{
            font-size: 12px;
            color: white;
            display: flex;
            justify-content: space-between;
            text-align: center;
            margin: 4px 0 5px ;
            li{
                width: 20%;
                .iconColor{
                    width: 38px;
                    height: 38px;
                    line-height: 38px;
                    border-radius: 50%;
                    background-color: #b20000;
                    margin: 0 auto 4px;
                    i{
                        font-size: 20px;
                    }
                }
                p{
                    color: peru;
                }
            }
        }
        .cut-off-Rule{
            border-bottom: 1px solid rgb(233, 137, 137);
            margin: 5px 0 10px;
        }
        .recomList{
            .gList-title{
                display: flex;
                justify-content: space-between;   
                margin-bottom: 8px;
                span{
                    &:first-of-type{
                        font-size: 14px;
                        font-weight: bold;
                        margin-left: 6px;
                    }
                    &:last-of-type{
                        font-size: 10px;
                        margin-right: 6px;
                        display: inline-block;
                        width: 56px;
                        height: 18px;
                        line-height: 18px;
                        border: 1px solid #e69999;
                        border-radius: 20px ;
                        a{
                            color: black;
                        }
                    }
                }
            }
            .songList{
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                .songItem{
                    width: 30%;
                    margin-bottom: 8px;
					position: relative;
                    img{
                        width: 100%;
                        border-radius: 5px;
                    }
					p{
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						padding: 6px 2px 0 6px;
						min-height: 30px;
						line-height: 1.2;
						font-size: 13px;
					}
                    .songGs{
                        display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;

                    }
                }
				.ejting{
					position: absolute;
					right: 5px;
					top: 2px;
					z-index: 3;
					padding-left: 13px;
					color: #fff;
					font-size: 12px;
					background-position: 0;
					background-repeat: no-repeat;
					background-size: 11px 10px;
					text-shadow: 1px 0 0 rgba(0,0,0,.15);
				}
            }
        }
        .new-title{
            display: flex;
            justify-content: space-between;
            margin: 0 0 8px 6px;
            a{
                color: black;
                &.router-link-exact-active {
                    font-size: 14px;
                    color: peru;
                }
            }
            .moreDc{
                font-size: 10px;
                margin-right: 6px;
                display: inline-block;
                width: 56px;
                height: 18px;
                line-height: 18px;
                border: 1px solid #e69999;
                border-radius: 20px ;
                a{
                    font-size: 10px;
                    color: black;
                }
            }
            .newactive{
                font-size: 14px;
                color: peru;
            }
        }
        .newSong{
            .newdc{
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                .songItem{
                    width: 30%;
                    margin-bottom: 8px;
                    img{
                        width: 100%;
                        border-radius: 5px;
                    }
                    p{
                        font-size: 10px;
                        color: gray;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                        &:first-of-type{
                            font-size: 12px;
                            color: black;
                        }
                    }
                }
            }
            .newge{
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                .ngeItem{
                    width: 30%;
                    margin-bottom: 8px;
                    img{
                        width: 100%;
                        border-radius: 5px;
                    }
                    p{
                        font-size: 10px;
                        color: gray;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        &:first-of-type{
                            font-size: 12px;
                            color: black;
                        }
                        
                    }
                    .newges{
                        display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
                    }
                }
            }
        }
		>p{
			font-size: 16px;
			text-align: left;
			padding: 10px;
			border-left: 2px solid red;
		}
    }
</style>